<template>
  <div class='work-menu'>
    <div class="work-item" v-for="(item,index) in menuData" :key="index" :title="item.title" @click="$router.push(item.url)">
      <img class="" :src="item.img" alt="pic">
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      menuData:[
        {
          img:require('../../../assets/images/works/item_1.jpg'),
          url:"/works/qa",
          title:"答题闯关"
        },{
          img:require('../../../assets/images/works/item_2.jpg'),
          url:"/works/notes",
          title:"部门投票"
        },{
          img:require('../../../assets/images/works/item_3.jpg'),
          url:"/works/extract",
          title:'议题抽取',
        },{
          img:require('../../../assets/images/works/item_4.jpg'),
          url:"/works/scores",
          title:'议题打分',
        },{
          img:require('../../../assets/images/works/item_5.jpg'),
          url:"/works/barrage",
          title:'弹幕',
        }
      ]
    };
  },
  methods: {},
  created() {}
};
</script>
<style lang="scss" scoped>
.work-menu {
  display: flex;
  justify-content: flex-start;

  .work-item{
    overflow: hidden;
    padding: 0 5px;
    width: 100px;
    flex-grow: 1;
    cursor: pointer;

    img{
      width: 100%;
      min-height: 100%
    }
  }
  .work-item:nth-of-type(1){
    width: 150px;
    padding-left: 10px;
  }
  .work-item:nth-last-of-type(1){
    padding-right: 10px;
  }
}
</style>